<div id="root">
    <daohanglan
    left-arrow
     @click-left="clickLeftFn" 
     @click-right="clickRightFn" 
     title="用户创建"
     ></daohanglan>
    <h1>表单组件</h1>
    <biaodan @biaodantijiao="canshu"></biaodan>
    <br>
    <hr>
    <h1>按钮组件</h1>
    <qf-button type="primary" title="主要按钮"></qf-button>
    <qf-button type="info" title="信息按钮"></qf-button>
    <qf-button type="default" title="默认按钮"></qf-button>
    <qf-button type="warning" title="警告按钮"></qf-button>
    <qf-button type="danger" title="危险按钮"></qf-button>
    <br>
    <hr>
    <h1>loading1组件</h1>
    <loading1 :state="xianshiyincang"></loading1>
    <button @click="xianshiyincang=true">显示</button>
    <button @click="xianshiyincang=false">隐藏</button>
    <br>
    <hr>
    <h1>loading2组件</h1>
    <loading2 :state.sync="xianshi"></loading2>
    <button @click="xianshi=true">显示</button>
    <br>
    <hr>
    <h1>对话框</h1>
    <qf-dialog :visible.sync="dialogState" title="用户创建" content="<input type='text'/>"></qf-dialog>
    <button @click="dialogState=true">显示loading</button>
    <br>
    <hr>
    <h1>分页组件page</h1>
    <qf-page :total="11" :page-size="2" @click-page="changePageFn"></qf-page>
    <br>
    <hr>
    <h1>表格组件</h1>
    <br>
    <qf-table :columns="usersColumns" :data="usersData"></qf-table>
    <br>
    <hr>
    <br>
    <qf-table :columns="goodsColumns" :data="goodsData"></qf-table>
    <br>
    <hr>
    <eltable :data="tableData">
        <tablecolumn prop="id" label="编号"></tablecolumn>
        <tablecolumn prop="name" label="姓名"></tablecolumn>
        <tablecolumn prop="age" label="年龄"></tablecolumn>
        <tablecolumn label="性别">
        <template slot-scope="item"> {{ item.sex == 1 ? '女' : '男' }} </template>
      </tablecolumn>
     </eltable>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="./qfui.css">
<script src="./qfui.js"></script>
<script>
const vm = new Vue({
    el: "#root",
    data: {
        xianshiyincang:false,
        xianshi:false,
        dialogState:false,
        //用户表格
        usersColumns:[
            {title:"编号",key:"id"},
            {title:"姓名",key:"uname"},
            {title:"性别",key:"sex"},
            {title:"性别另一种",key:"sex1",render:(row)=>`<b style="color:blue">${row.sex1===1?"男":"女"}</b>`},
        ],
        usersData:[
            {id:1,uname:"张三",sex:"男"},
            {id:2,uname:"李四",sex:"男"},
            {id:3,uname:"王二",sex:"男"},
            {id:4,uname:"麻子",sex:"男"},
        ],
        //商品表格
        goodsColumns:[
            {title:"编号",key:"id"},
            {title:"商品名称",key:"title"},
            {title:"价格",key:"price"},
        ],
        goodsData:[
            {id:1,title:"商品1",price:1.11},
            {id:2,title:"商品2",price:2.22},
            {id:3,title:"商品3",price:3.33},
            {id:4,title:"商品4",price:4.44},
        ],
        tableData:[
        { id: 1, name: "张三", age: 1, sex:2 },
        { id: 2, name: "李四", age: 2, sex:1 },
        { id: 3, name: "王五", age: 3, sex:2},
        { id: 3, name: "赵六", age: 4, sex:2},
        ]
    },
    methods: {
        changePageFn(pageNum) {
            console.log('你点击分页了：', pageNum)
        },
        clickLeftFn(){
            alert('clickLeftFn')
        },
        clickRightFn(){
            alert('clickRightFn')
        },
        canshu(yonghushuju){
            console.log('表单数据',yonghushuju);
            alert('用户创建请求接口')
        }
    }
})
</script>